<template>
  <!-- ref配置 dom获取属性 -->
  <div ref="editorElem" style="text-align: left"></div>
</template>
 
<script>
import wangeditor from "wangeditor";
export default {
  props: {  
    editorData: {  
      type: String,  
      default: ""  
    }  
  },  
  data() {
    return {
      editor: null,
      editorContent: "",
    };
  },
  watch: {
    onEditorData(value) {
      console.log(value);
    },
  },
  mounted() {
    //获取dom元素 this.$refs.名字  进入富文本初始化  const editor = new E('#div1')
    this.editor = new wangeditor(this.$refs.editorElem);
    //配置 onchange 函数之后，用户操作（鼠标点击、键盘打字等）导致的内容变化之后，会自动触发 onchange 函数执行
    this.editor.customConfig.onchange = (html) => {
      this.editorContent = html; //获取输入的值
      //把富文本器  里面输入的内容 传递给父组件使用数据
      this.$emit("onEditor", this.editorContent);
    };
    /// 默认情况下，显示所有菜单
    this.editor.customConfig.menus = [
      // 菜单配置
      "head", // 标题
      "bold", // 粗体
      "fontSize", // 字号
      "fontName", // 字体
      "italic", // 斜体
      "underline", // 下划线
      "strikeThrough", // 删除线
      "foreColor", // 文字颜色
      "backColor", // 背景颜色
      "link", // 插入链接
      "list", // 列表
      "justify", // 对齐方式
      "quote", // 引用
      "emoticon", // 表情
      "image", // 插入图片
      "table", // 表格
      "code", // 插入代码
      "undo", // 撤销
      "redo", // 重复
    ];
    //创建富文本实例
    this.editor.create();
    //创建编辑器之后，使用 editor.txt.html(...) 设置编辑器内容   重新设置编辑器内容
    this.editor.txt.html(this.editorData)
  },
};
</script>
 
<style>
</style>